<template>
	<div class="page">
		<div class="header">
			<image class="bg" :src="bgSrc" mode="aspectFill"></image>
			<div class="title">智能DM</div>
		</div>
		
		
		<div class="main">
			<div class="card">
						<text class="title">角色选择</text>
						<text class="subtitle">请选择您的游戏角色</text>
				<button class="role-select-btn" @click="onRoleSelect">
				<image  :src="iconGroupSrc" mode="widthFix"></image>
			</button>
			</div>
			<div class="card">

					<text class="title">法官选择</text>
					<button class="option-btn active">男声</button>
					<button class="option-btn">女声</button>
					<button class="option-btn">合成音</button>
					<button class="option-btn">语音4</button>
					<button class="option-btn">+自定义</button>
					<button class="option-btn">+自定义</button>
					<button class="option-btn">+自定义</button>
					<button class="option-btn">不需要</button>

			</div>
			<div class="card">
					<text class="title">是否上警</text>
				<button class="option-btn">是</button>
				<button class="option-btn">否</button>
			</div>
			<div class="card">
					<text class="title">胜利条件</text>
				<button class="option-btn">屠边</button>
				<button class="option-btn">屠城</button>
			</div>
		</div>
		
		<div class="start-game-container">
			<button class="start-game-btn">开始游戏</button>
		</div>



		<div class="bottom-nav">
			<div class="nav-item active">
				<image class="nav-icon" :src="homeIconSrc" mode="aspectFit"></image>
				<text class="nav-text">首页</text>
			</div>
			<div class="nav-item">
				<image class="nav-icon" :src="messageIconSrc" mode="aspectFit"></image>
				<text class="nav-text">信息</text>
			</div>
			<div class="nav-item">
				<image class="nav-icon" :src="profileIconSrc" mode="aspectFit"></image>
				<text class="nav-text">我的</text>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				bgSrc: '',
				bucket: '',
				iconGroupSrc: '',
				homeIconSrc: '',
				messageIconSrc: '',
				profileIconSrc: ''
			}
		},
		methods: {
			onRoleSelect() {
				console.log('角色选择按钮被点击');
			}
		},
		mounted() {
			const info = uni.getSystemInfoSync && uni.getSystemInfoSync();
			const dpr = info && info.pixelRatio ? info.pixelRatio : 1;
			let bucket = 'mipmap-mdpi';
			if (dpr >= 3.5) {
				bucket = 'mipmap-xxxhdpi';
			} else if (dpr >= 2.5) {
				bucket = 'mipmap-xxhdpi';
			} else if (dpr >= 1.75) {
				bucket = 'mipmap-xhdpi';
			} else if (dpr >= 1.25) {
				bucket = 'mipmap-hdpi';
			}
			this.bgSrc = `/static/${bucket}/蒙版组 5.png`;
			this.bucket = bucket;
			this.iconGroupSrc = `/static/${bucket}/组 37841.png`;
			this.homeIconSrc = `/static/${bucket}/home.png`;
			this.messageIconSrc = `/static/${bucket}/Messages.png`;
			this.profileIconSrc = `/static/${bucket}/Profile.png`;
		}
	}
</script>

<style>
		@import "~@/styles/layout.scss";
		@import "~@/styles/components.scss";


	</style>
